<template>
	<div class="opus">
		<div class="add-btn" v-if="editState == 0" @click="addOpus"><img src="@/assets/me/upload.png"><span>上传</span></div>
		<div class="title">照片/作品</div>
		<div class="opus-content" v-if="editState == 0 && form.productInfos.length>0">
			<div class="opus-line flex">
				<div class="opus-item" v-for="(items,index) in form.productInfos" :key="index">
					<div class="opus-img">
						<img :src="items.fileId" class="face">
					</div>
					<div class="opus-desc flex">
						<div class="opus-name flex-item">{{items.remark}}</div>
						<div class="opus-option flex">
							<span class="edit" @click="editOpus(index)">编辑</span>
							<span class="del" @click="delOpus(index)">删除</span>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		<div class="opus-content no-data" v-if="editState == 0 && form.productInfos.length == 0">
			支持jpg/gif/bmp/png格式（文件大小800K以内）
		</div>
		<div class="opus-edit" v-if="editState == 1">
			<div class="content">
				<el-form ref="form" :model="editForm" :rules="rules" label-width="85px" label-position="left" class="flex" hide-required-asterisk>
					<div class="edit-left">
						<div class="edit-item flex upload-item">
							<div class="red-dian"></div>
							<el-form-item label="上传文件：" class="flex-item" prop="fileId">
								<el-upload
									action="#"
									class="upload-input"
									v-model="files"
									:show-file-list="false"
									:http-request="uploadFaceFiles">
										<div class="upload-btn"><img src="@/assets/me/upload.png">上传文件</div>
								</el-upload>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="图片描述：" class="flex-item" prop="remark">
								<el-input v-model="editForm.remark" placeholder="请输入"></el-input>
							</el-form-item>
						</div>
					</div>
				</el-form>
				<div class="form-option">
					<div class="save qida-success-btn" @click="saveEdit">保存</div>
					<div class="cancel qida-cancel-btn" @click="cancelEdit">取消</div>
					<span class="tips">支持jpg/gif/bmp/png格式（文件大小800K以内）</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {updateResumeProduct} from '@/api/me/resume'
import {filesAnon} from '@/api/base'
	export default {
		name:'opus',
		props:['resumeProducts'],
		data: function() {
			return {
				editState:0,//0:显示，1：编辑
				editIndex:0,
				form:{
					"productInfos": this.resumeProducts,
					"resumeId": this.$route.query.id
				},
				files:[],
				rules: {
					remark: [{ required: true, trigger: "blur", message: "请输入图片描述" }],
					fileId: [{ required: true, trigger: "blur", message: "请选择文件" }],
				},
				editForm:{
					"fileId": "",
					"id": '',
					"remark": ""
				},
				optionType:1
			}
		},
		watch:{
			resumeProducts(val){
				this.form.productInfos = val;
				this.form.resumeId=this.$route.query.id;
			}
		},
		methods: {
			saveEdit(){
				this.$refs.form.validate(valid => {
					if (valid) {
						this.form.productInfos[this.editIndex].fileId=this.editForm.fileId;
						this.form.productInfos[this.editIndex].id=this.editForm.id;
						this.form.productInfos[this.editIndex].remark=this.editForm.remark;

						updateResumeProduct(this.form).then(res => {
							if(res.resp_code == 0){
								this.msgSuccess('操作成功');
							
							}
							
							this.editState=0;
						}).catch(err => {
							this.msgError(err);
						})
					}
				})
			},
			uploadFaceFiles(params){
				var vm = this;
				const file = params.file,
					fileType = file.type,
					fileName = file.name,
					isImage = fileName.indexOf("jpg") != -1 || fileName.indexOf("gif") != -1 || fileName.indexOf("bmp") != -1 || fileName.indexOf("png") != -1,
					isLt2M = file.size / 1024 < 800;

				// 这里常规检验，看项目需求而定
				if (!isImage) {
					this.$message.error("只能上传文件格式jpg、gif、bmp、png");
					return;
				}
				if (!isLt2M) {
					this.$message.error("只能上传文件大小小于800KB");
					return;
				}
				// 根据后台需求数据格式
				const form = new FormData();
				// 文件对象
				form.append("file", file);
				// 项目封装的请求方法，下面做简单介绍
				filesAnon(form).then(res => {
					this.$message.success('上传成功');
					this.$set(vm.editForm,'fileId',res.url)
					//this.$set(vm.editForm,'id',res.id)
				}).catch(res => {
					//this.$message.error("上传失败，请重新上传");
				})
			},
			editOpus(index){
				this.editIndex=index;
				this.editForm={
					"fileId":this.form.productInfos[index].fileId,
					"id": this.form.productInfos[index].id,
					"remark": this.form.productInfos[index].remark
				}
				
				this.optionType=2;
				this.editState=1;
			},
			delOpus(index){
				this.form.productInfos.splice(index,1);
				this.optionType=3;
				updateResumeProduct(this.form).then(res => {
					this.$message.success('删除成功');
				}).catch(err => {
					this.$message.error(err);
				})
			},
			addOpus(){
				
				var arr={
					"fileId": "",
					"id": '',
					"remark": ""
				}
				
				this.form.productInfos.push(arr);
				this.editIndex=this.form.productInfos.length-1;
				this.editForm=arr;
				this.optionType = 1;
				this.editState = 1;
			},
			cancelEdit(){
				this.editForm={
					"fileId":'',
					"id": '',
					"remark": ''
				}
				if(this.optionType == 1){
					this.form.productInfos.splice(this.editIndex,1);
				}
				this.editState = 0
			}
		}
	}
</script>
<style lang="scss" >
	.opus{
		width: 100%;
		position: relative;
		margin: 30px 0;
		.add-btn{
			color: #3EABC4;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			img{
				vertical-align: middle;
				margin-top: -2px;
				margin-right: 3px;
			}
		}
		.title{
			font-size: 16px;
			font-weight: bold;
			color: #3EABC4;
			border-left:4px solid #3EABC4;
			text-indent: 10px;
		}
		.opus-content .no-data{
			padding-left: 10px;
			margin-top: 40px;
		}
		.opus-content{
			margin-top: 25px;
			color: #787878;
			overflow: hidden;
			.opus-line{
				flex-wrap:wrap;
			}
			.opus-item{
				border-radius: 2px;
				width: 260px;
				margin-bottom: 15px;
				margin-right: 40px;
				.opus-img{
					width: 260px;
					height: 210px;
					img{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				.opus-desc{
					margin-top: 15px;
					.opus-name{
						padding-right: 10px;
					}
					.opus-option{
						span{
							cursor: pointer;
							display: block;
						}
						.edit{
							color: #3EABC4;
							margin-right: 10px;
						}
					}
				}
			}
			.opus-item:nth-child(3n){
				margin-right: 0;
			}
		}
		.opus-edit{
			.content{
				margin-top: 25px;
				padding-bottom: 20px;
				.edit-left{
					padding-right: 80px;
					width: 675px;
					box-sizing: border-box;
				}
				.edit-item{
					
					.el-form-item{
						margin-bottom: 20px;
						.el-form-item__label{
							font-weight: normal;
							color: #777777;
						}
						.el-input__inner{
							border-radius: 0px;
						}
						.el-input{
							width: 100%;
						}
						.upload-input{
							width: 100%;
							.el-upload{
								width: 100%;
							}
						}
						.upload-btn{
							width: 100%;
							height: 60px;
							line-height: 60px;
							background: #EEF5F7;
							border-radius: 4px;
							text-align: center;
							color: #3EABC4;
							img{
								vertical-align: middle;
								margin-top: -3px;
								margin-right: 5px;
							}
						}
					}
					.red-dian{
						width: 5px;
						height: 5px;
						border-radius: 2.5px;
						background-color: #d92032;
						margin-right: 5px;
						margin-top: 16px;
					}
					.red-dian.hide{
						opacity: 0;
					}
				}
				.edit-item.upload-item{
					.el-form-item__label{
						font-weight: normal;
						color: #777777;
						height: 60px;
						line-height: 60px;
					}
					.red-dian{
						margin-top: 28px;
					}
				}
				.form-option{
					margin-top: 10px;
					padding-left: 10px;
					.save{
						margin-right: 15px;
					}
					.tips{
						font-weight: 400;
						color: #BBBBBB;
						line-height: 36px;
						margin-left: 20px;
					}
					
				}
			}
		}
	}
</style>
